<template>
  <div>
    <div class="search-box">
      <div class="left">
        <input type="text" placeholder="时尚男鞋 太阳镜">
      </div>
      <div class="right">
        搜索
      </div>
    </div>
    <div class="under-search">
      <div>平衡车</div>
      <div>|</div>
      <div>扫地机器人</div>
      <div>|</div>
      <div>原汁机</div>
      <div>|</div>
      <div>冰箱</div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped>
  .search-box {
    width: 400px;
    height: 50px;
    border: 1px solid #C40000;
    display: flex;
    margin: 20px auto 4px auto;
  }
  .search-box .left{
    width: 300px;
    height: 50px;
    box-sizing: border-box;
  }
  .search-box .left input{
    width: 300px;
    height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    outline: none;
  }
  .search-box .right{
    width: 100px;
    box-sizing: border-box;
    height: 50px;
    background-color: #C40000;
    color: white;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
  }
  .under-search{
    width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: rgb(153,153,153);
    padding-right: 50px;
    box-sizing: border-box; 
  }
  .under-search>div:nth-child(even){
    user-select: none;
    cursor: default;
  }
  .under-search>div:nth-child(odd){
    cursor: pointer;
  }
  .under-search>div:nth-child(odd):hover{
    color: #C40000;
  }
</style>
